<template>
  <div class="adminList">
    <el-card>
      <div>管理员列表</div>
      <div style="display: flex;justify-content: space-between;margin: 20px 0">
        <el-button type="primary" @click="addAdmin"><span style="font-size: 25px">+</span>&nbsp&nbsp新增</el-button>
        <el-input
            class="search"
            size="small"
            placeholder="请输入用户名/姓名"
            suffix-icon="Search"
        />
      </div>
      <!--      表格-->
      <el-table :data="tableData" style="width: 100%" size="large">
        <el-table-column prop="admin_id" label="管理员ID" width="180"/>
        <el-table-column prop="admin_name" label="用户名" width="220"/>
        <el-table-column  label="姓名">
          <template #default="scope">
            <span>系统管理员</span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序"/>
        <el-table-column prop="create_time" label="添加时间"/>
        <el-table-column label="操作">
          <template #default="scope">
            <span style="cursor: pointer;color: #1890ff" @click="Edit(scope.row)">编辑</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin:20px 0">
        <el-pagination
            v-model:currentPage="state.currentPage"
            background layout="prev, pager, next"
            :total="count"
            @current-change="changeSize"
            @prev-click="pageDown"
            @next-click="nextSize"
        :page-size="state.pageSize"
        />
      </div>
    </el-card>
    <!--    编辑和删除弹出框-->
    <AdminDialog ref="dia" @EditSuccess="EditSuccess" :AdminInfo="AdminInfo"></AdminDialog>
  </div>
</template>
<script setup>
import {ref, reactive, onBeforeMount} from "vue";
import {useRouter} from "vue-router";
import AdminDialog from "./AdminDialog"
import {accountList} from "../../../HTTP/api";
import {ElMessage} from "element-plus";
//时间戳
import moment from "moment"
const dia = ref(null)
const router = useRouter()
let AdminInfo=ref()
//总页数
const count = ref()
//当前页数
const tableData = ref()
const state=reactive({
  currentPage:1,
  pageSize:10,
})
//编辑
const Edit = (data) => {
  AdminInfo.value=data
  dia.value.dialogFormVisible = true
}
//新增
const addAdmin = () => {
  dia.value.dialogFormVisible = true
  AdminInfo.value=null
}
//请求数据
function getListData(page = 1, size = 10) {
  accountList({page, size}).then(res => {
    if (res.code === 3000) {
      sessionStorage.setItem("userToken", "")
      ElMessage.error('请重新登录')
      router.replace({path: '/login'})
    }
    if (res.code === 2000) {
      count.value = res.data.count
     res.data.data.forEach(item=>{
       item.create_time=moment(item.create_time).format('YYYY-MM-DD HH:MM')
      })
      tableData.value=res.data.data
    }

  })
}
const EditSuccess=(e)=>{
  if(e){
    getListData()
    state.currentPage=1
  }
}
//改变页数
const changeSize = (e) => {
  getListData(e)
}
//上一页
const nextSize = () => {
  getListData(state.currentPage + 1)
}
//下一页
const pageDown = () => {
  getListData(state.currentPage - 1)
}
onBeforeMount(() => {
  getListData()
})
</script>

<style scoped>
.adminList {
  flex: 1;
  margin: 20px;
}

.search {
  width: 300px;
}
</style>
